<script setup>
import { getUserListRes, getRandomUserRes, deleteAll } from '@/api/api.js'

import { onMounted, reactive, ref } from 'vue';
  const music = new Audio('random.mp3');
  const stopMusic = new Audio('stop.mp3');

  const isStart = ref(false)
  const isFinish = ref(false)

  const activeName1 = ref('')
  const activeName2 = ref('')

  const isRun = ref(false)
  const isShowLiPao = ref(false)
  
  var timer = null

  const userList = ref([])

  onMounted(() => {
    // 获取用户列表
    getUserList()
  })

  // 开始随机点名 - 姓名变化
  function start() {
    // 播放随机音乐
    music.loop = true
    music.play();
    
    if (userList.value && userList.value.length > 1) {
      isStart.value = true
      isRun.value = true

      let index1 = null
      let index2 = null

      let user1 = null
      let user2 = null

      timer = setInterval(() => {
        index1 = parseInt(Math.random() * userList.value.length);
        user1 = userList.value[index1];
        activeName1.value = user1.name

        do { 
          index2 = parseInt(Math.random() * userList.value.length);
          user2 = userList.value[index2];
          activeName2.value = user2.name
        } while (index1 === index2)
      }, 100)
    } else if (userList.value && userList.value.length == 1) {
      isStart.value = true
      isRun.value = true

      timer = setInterval(() => {
        let user = userList.value[0];

        activeName1.value = user.name
        activeName2.value = user.name
      }, 100)
    } else {
      isStart.value = false
      isRun.value = false
    }
  }

  // 停止 - 匹配姓名
  function stop() {
    music.pause();
    stopMusic.play()

    if (userList.value.length > 0) {
      isRun.value = false

      // 获取匹配用户
      getRandomUser()

      // 播放音乐
      const music1 = new Audio('music1.mp3');
      music1.play();

      const music2 = new Audio('music2.mp3');
      music2.loop = false

      isShowLiPao.value = true

      setTimeout(() => {
        music2.play();
      }, 1000)

      setTimeout(() => {
        music2.pause();
      }, 6000)

      clearInterval(timer)

      setTimeout(() => { isShowLiPao.value = false }, 900)
    } else {
      isStart.value = false
      isFinish.value = true
    }
  }

  function finish() {
    isRun.value = false
    isStart.value = false
    isFinish.value = true
  }

  // 获取 用户列表
  async function getUserList() {
    let res = await getUserListRes();
    try {
      // console.log('用户列表 : ', res.data);
      userList.value = res.data
    }
    catch (err) {
      console.log(err)
    }
  }

  // 获取 匹配用户
  async function getRandomUser() {
    let res = await getRandomUserRes();
    try {
      // console.log('匹配用户 : ', res.data);
      if (res.data && res.data.length > 1) {
        activeName1.value = res.data[0].name
        activeName2.value = res.data[1].name
      } else {
        activeName1.value = res.data[0].name
        activeName2.value = res.data[0].name
      }

      // 更新获取用户列表
      getUserList()
    }
    catch (err) {
      console.log(err)
    }
  }

  // 重新开始
  async function reStart() {
    let res = await deleteAll();
    try {
      console.log('重新开始');

      isRun.value = false
      isStart.value = false
      isFinish.value = false

      getUserList()
    }
    catch (err) {
      console.log(err)
    }
  }
</script>

<template>
  <div class="body full body_bgi bgs_full relative">
    <div class="w_full h_180 absolute top_20 left_center flex_row_center gap_20">
      <div class="w_180 h_180">
        <img class="full" src="../assets/images/wzj.png" alt="">
      </div>
      <div class="w_180 h_180">
        <img class="full" src="../assets/images/dayaar.png" alt="">
      </div>
      <div class="w_180 h_180">
        <img class="full" src="../assets/images/muu2.png" alt="">
      </div>
    </div>

    <div id="container" v-show="activeName2 && !isRun">
      <div :class="{ fireworks_1 : !isRun }"><img src="../assets/images/yan-hua.gif" alt=""></div>
      <div :class="{ firecracker_1 : !isRun }"><img src="../assets/images/firecracker.png" alt="" width="8px"></div>

      <div :class="{ fireworks_2 : !isRun }"><img src="../assets/images/yan-hua.gif" alt=""></div>
      <div :class="{ firecracker_2 : !isRun }"><img src="../assets/images/firecracker.png" alt="" width="8px"></div>

      <div :class="{ fireworks_3 : !isRun }"><img src="../assets/images/yan-hua.gif" alt=""></div>
      <div :class="{ firecracker_3 : !isRun }"><img src="../assets/images/firecracker.png" alt="" width="8px"></div>

      <div :class="{ fireworks_4 : !isRun }"><img src="../assets/images/yan-hua.gif" alt=""></div>
      <div :class="{ firecracker_4 : !isRun }"><img src="../assets/images/firecracker.png" alt="" width="8px"></div>
    </div>

    <div class="full text_center fs_50 absolute_center cursor">
      <div v-if="isShowLiPao" class="absolute_center">
        <img class="full" src="../assets/images/li-pao.gif" alt="">
      </div>

      <div class="full relative p_10" :class="{ bgc_60 : isStart && !isRun }">
        <div class="full flex_row_between flex_center gap_50 relative">
          <div 
            class="w_50_p h_300 lh_300 fs_200 cursor name fw_bold zh_font_2 ls_5 name_box fa_guang"
            :class="{'animate__animated animate__bounce': !isRun}" 
            v-if="isStart"
          >
            {{ activeName1 }}
          </div> 

          <div 
            class="w_50_p h_300 lh_300 fs_200 cursor name fw_bold zh_font_2 ls_5 name_box fa_guang"
            :class="{'animate__animated animate__bounce': !isRun}" 
            v-if="isStart"
          >
            {{ activeName2 }}
          </div> 

          <!-- 礼物图片 -->
          <div class="w_300 h_180 absolute top_43_p left_center"  v-if="isStart && !isRun">
            <img class="full" src="../assets/images/li-wu.png" alt="">
          </div>
        </div>
        
        <div class="w_95_p m_0_auto fs_200 cursor name fw_bold zh_font_2 ls_5 name_box absolute_center" v-if="isFinish">
          游戏已结束！<br>谢谢大家的参与！
        </div> 

        <div class="w_500 h_100 cursor absolute left_center bottom_50" v-if="isFinish" @click="reStart()">
          <img class="full" src="../assets/images/restart.png" alt="">
        </div> 
      </div>
    </div>

    <div class="w_500 h_100 cursor absolute left_center bottom_50" v-if="userList.length && !isRun && !isFinish" @click="start()">
      <img class="full" src="../assets/images/start-btn.png" alt="">
    </div> 

    <div class="w_500 h_100 cursor absolute left_center bottom_50" v-else-if="userList.length && isRun && !isFinish" @click="stop()">
      <img class="full" src="../assets/images/stop-btn.png" alt="">
    </div> 

    <div class="w_500 h_100 cursor absolute left_center bottom_50" v-else-if="!userList.length && !isFinish" @click="finish()">
      <img class="full" src="../assets/images/finish.png" alt="">
    </div> 
  </div>
</template>

<style>
  .body {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
  }

  .name { color: rgb(234, 234, 90); }

  .btn { 
    background-image: url('../assets/images/btn.png');
    background-size: 100% 100%; 
    background-repeat: no-repeat;
  }

  #container{
    width: 100%;
    height: 100%;
    background: none;
    position: relative;
  }

  .fireworks_1 {
    position: absolute;
    left: -30%;
    bottom: -30%;
    margin-bottom: -250px;
    transform: scale(0);
    animation: fireworks 4s 1s;
  }

  .fireworks_2 {
    position: absolute;
    left: -20%;
    bottom: -20%;
    margin-bottom: -250px;
    transform: scale(0);
    animation: fireworks 4s 2s;
  }

  .fireworks_3 {
    position: absolute;
    left: 0%;
    bottom: -10%;
    margin-bottom: -250px;
    transform: scale(0);
    animation: fireworks 4s 1s;
  }

  .fireworks_4 {
    position: absolute;
    left: 10%; 
    bottom: -40%;
    margin-bottom: -250px;
    transform: scale(0);
    animation: fireworks 4s 2s;
  }

  @keyframes fireworks {
    0%{
      transform: scale(0);
    }
    80%{
      transform: scale(1);
    }
    100%{
      opacity: 0;
    }
  }
  .firecracker_1 {
    position: absolute;
    left: 20%;
    bottom: 0%;
    animation: firecracker 3s forwards;
  }

  .firecracker_2 {
    position: absolute;
    left: 35%;
    bottom: 0%;
    animation: firecracker 3s forwards;
  }

  .firecracker_3 {
    position: absolute;
    left: 50%;
    bottom: 0%;
    animation: firecracker 3s forwards;
  }

  .firecracker_4 {
    position: absolute;
    left: 75%;
    bottom: 10%;
    animation: firecracker 3s forwards;
  }

  @keyframes firecracker {
    0%{
      transform: scale(1);
      bottom: 0%;
    }
    100%{
      bottom: 60%;
      transform: scale(0);
    }
  }

  /* .fa_guang { text-shadow: 0 0 3px yellow, 0 0 3px yellow, 0 0 3px yellow, 0 0 3px yellow; } */

  .bgc_60 { background: rgba(13, 13, 13, 0.164); }
</style>